IADIS International Conference e-Leaming 2013 


INTERACTION PROBLEMS ACCESSING E-LEARNING 
ENVIRONMENTS IN MULTI-TOUCH MOBILE DEVICES: 
A CASE STUDY IN TELEDUC 


Andre Constantino da Silva 1 ' Fernanda Maria Pereira Freire 2 ’ Alan Victor Pereira de Arruda 3 

and Helofsa Vieira da Rocha 4 

1 Institute of Computing (PPGVUN1CAMP, IFSP, Campinas, Brazil / Hortolandia, Brazil 
: NIED/UNICAMP, Campinas, Brazil 
3 ProFIS/UNICAMP. Campinas, Brazil 
4 Institute of Computing/UNIC AMP, Campinas, Brazil 


ABSTRACT 

e-Learning environments offer content, such text, audio, video, animations, using the Web infrastructure and they are 
designed to users interacting with keyboard, mouse and a medium-sized screen. Mobile devices, such as smartphones and 
tablets, have enough computation power to render Web pages, allowing browsing the Internet and access e-Learning 
environments. But, their main interaction style is touching, bringing some problems, cosmetics or severe ones. To 
identify these problems and correct them to allow mobile users access the TelEduc, an e-Learning environment, we 
planned a user test case with four volunteers using smartphones for access it. The collected data was analyzed and some 
problems were identified, giving some insights about the problems and barriers multi-touch mobile users dealt and can be 
easily corrected to give them a better interaction experience. To have an e-Learning environment with good usability in 
mobile devices is a first step to have a virtual learning environment for sharing data between desktop and mobile devices 
and understand the behavior of mobile users in this context. 
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1. INTRODUCTION 

e-Leaming environments, as Moodle (2013), SAKAI (2013) and TelEduc (2013), are Web applications with 
tools to support teaching and learning activities though the Web, taking advantages of the Web structure to 
offer content with text, images, audios and videos in a hypertext document. The environment's tools allow 
users to create content, communicate with other users and manage the virtual space, so tools like chat, 
fomms, portfolios, repositories are widely used, and tools that explore the audio and video resource to 
communication, such as instant messenger and video-conferences, are becoming common among the 
environments. 

Mobile devices, such as smartphones and tablets, are becoming increasingly popular; most of them have 
touch screen displays, are easy to carry, have autonomy for hours, Internet access and enough computing 
power to process Web pages. So, Web sites and Web applications, initially developed to be used with 
keyboard, mouse and a medium-sized display, are been accessed by small touch screen devices. The 
e-learning environments fit in this context. Three kind of solution to allow mobile users access e-Learning 
environment are emerging: specific device application, Web site specific for mobile devices, and 
improvement of the environment for mobile and desktop access. Each solution had vantages and 
disadvantages. But, in the case of virtual teaching and learning environments, we need ask: is it fundamental 
have a specific environment for only mobile users? Since Web technology has a power to integrate different 
technologies, we believe in a virtual teaching and learning environment that allow any device accesses. 
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Maurer et al. (2007) did some usability studies using touchscreen mobile devices and desktop for 
browsing in Web sites, shows that “more and more people prefer using original content instead of the mobile 
version, especially for users of new generation mobile devices like iPhone and Android phones”. Another 
result of this work was the users prefer to use the standard Web site instead of tailored mobile versions of 
Web site. But Schmiedl et al. (2009) have a different opinion; in their research they conclude most of the 
users still prefer tailored versions. Kaikkonen (2008) shows that the standard and the tailored Web sites are 
both used but for slightly reasons. 

Since there is not a clearly opinion in the researches about the users preference in using tailored mobile 
version or the standard interface, it is important to find and destroy barriers that mobile users meet when uses 
standard Web interface. In e-Learning context, which are the barriers or the problems the user dealt? To 
identify them in TelEduc environment we did user tests. Through this work we identified important design 
issues to allow mobile users access e-Learning environments and Web applications. Section 2 presents 
related work. Section 3 presents the TelEduc environment. The materials and method are described in 
Section 4. The identified problems are presented in Section 5, and Section 6 discusses some solutions. 
Section 7 presents the conclusion and future work. 


2. RELATED WORK 

The e-Leaming environments' development teams are building solutions to provide access on mobile 
devices. Three kind of solution are emerging: specific device application; Web site specific for mobile 
devices; and improve the Web site for mobile and desktop access. 

Building specific device application allows designing a suitable user interface for the device and taking 
advantages of smartphone's features, such as touchscreen and camera, but needs develop an application for 
each mobile platform, so to be developed needs specific knowledge programming team and increases the 
code lines number to maintain. Moodle community offers the Moodle App (2013) and Moodbile (2012), two 
native mobile applications with versions for the most popular smartphone's platforms. 

Moodle, since version 2.1, offers a Web site specific to mobile devices, an example for the second type of 
solutions for access e-Learning environments in mobile devices. Building a specific Web site to mobile 
device allows designing a suitable user interface for mobile devices taking account some common 
characteristics, such small touchscreen, but depends of the browser to access some platform features, such 
GPS, and increases the code lines number to maintain too. 

The latter solution considers that smartphones and tablets have enough computational power to render 
Web pages and to do some adaptation if it is necessary, and offer the same user interface for any device. To 
design this kind of user interface it is necessary to do some usability studies to found barriers or user 
interaction problems. Disadvantages of this solution are to depend of browsers to use the mobile features and 
the difficult of consider many interaction styles in the same user interface. 

This solution can start from a user interface design model for desktop and be improved to consider mobile 
devices. So in the initial design was designed thinking the user will interact by keyboard, mouse and medium 
size display and, allowing users accessed these applications on mobile devices, there is an increasing of 
interaction styles number, such touchscreen. With the interaction hardware changing the user deals with new 
interaction problems. Shrestha (2012) did user tests with volunteers using mobile devices equipped with 
joystick and a small screen and points out some problems when the users try to use mobile devices to do 
specific tasks into Web sites designed to desktop, so the mobile Web browsing experience needs to be 
improved to a more mobile friendly Web site and some mobile browser improvement (here we consider 
browser as one platform characteristic). 

Considering only the e-Learning environment context, we agree to Maurer et al. (2010) when they argue 
the user prefer to use the standard version instead of mobile version of Web site, and this is one of the 
motivations of our work to study the third kind of solution: to access e-Learning environment using mobile 
devices. Shrestha (2012) studied the use of joystick and a small screen to browsing into some Web sites, 
while Maurer et al. (2010) considers touchscreen devices. All these researches point out some interaction 
problems, but the context was not e-Learning environments. In this work, we identified, through users test, 
problems when users use touchscreen mobile devices to access the TelEduc e-Learning environment. 
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3. THE TELEDUC E-LEARNING ENVIRONMENT 

The TelEduc is a teaching and learning environment developed by the Nucleus of Applied Informatics in 
Education (NIED) and the Institute of Computing (IC), State University of Campinas (UNICAMP), and 
adopted in several public and private institutions, like UNICAMP through Ensino Aberto project (Franco et 
al., 2003). 

The TelEduc environment was conceited in the end of 90, born with the Cerceau's Master dissertation 
(1998), with professor Helolsa Vieira da Rocha as advisor, applying constructivism theory (Papert, 
1986)(Valente, 1993) in situated learning (Lave and Wenger, 1991) or in contextualized learning (Valente, 
1999) for teacher's continuance formation. In 2001 February, the first free version was released over GNU 
General Public License (GPL), an unprecedented fact in the Brazilian Educational Software scenario. Many 
public and private institutions adopted the TelEduc as platform, increasing the TelEduc user’s community, 
and consequently, the development demand. This fact culminated in the release of TelEduc version 3.0 in 
March 2002. The version 3.0 was completely redesigned and optimized, reason for TelEduc project was 
awarded by ABED (Brazilian Association for Distance Education) in the “Research and Development about 
Distance Learning” category. In August 2011, TelEduc version 4.3 was released, with its user interface 
redesigned to improve user tasks and be more similar than popular Web sites. 

TelEduc is a system that aggregate administration, management and communication tools designed to 
support teaching and learning activities. Some tools allow users to create content, other ones allow 
synchronous or asynchronous communication among users, and manage participants and courses. The course 
page of TelEduc 4.3 is structured in two parts: the left one (Fig. la) has a list of all tools available and in the 
right one (Fig. lb) the content of the selected tool. 

In the course showed at Fig. la, a print screen of the course made for our user tests (the content is in 
Portuguese), the teacher dispose the Course Dynamic, Agenda, Activities, Support Material, Readings, 
Frequently Asked Questions, Polls, Required Stop, Bulletin Board, Discussion Forums, Chat, Mail, Profile, 
Portfolio, Access, Intermap and Search tools. Agenda is the ongoing course home page and shows the 
course's program for a given period (daily, weekly, etc.). Agenda is an important tool because organize the 
activities that must be done in a specific period, similar teachers do in the beginning of a presence class. Fig. 
lb shows the Agenda tool visualized by a student, where the student can read the agenda content and access 
the previous agendas. 



(a) (b) 

Figure 1 . A desktop print screen of TelEduc course page (a) tool menu and (b) tool content. 
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The Readings, Activities, Frequently Asked Questions and Support Material tools have similar features 
and user interface, but different purposes. Readings tool is used to publish relevant documents, like books, 
magazines, news and articles. The Activities tool is an area to publish activities to the accomplished during 
the course, like home work descriptions. The Frequently Asked Questions tool contains a list of the most 
frequently questions done by the participants during the course and their respective answers. Support 
Material offers a virtual space for teachers publish useful information about the course and the proposed 
activities. 

Tools like Discussion Forums and Mail are used to participant communication, supporting text message 
exchange in asynchronous mode. To synchronous communication, there is the Chat tool, its features is 
similar to Web chat sites. 

The Portfolio is a communication tool that aims to promote the collaboration among participants through 
the sharing of “items” (documents, presentations, programs, links, etc.). So the Portfolio tool provides an area 
to item storage and sharing for each participant (user or group of users) within a course. The Bulletin Board 
tool is a dedicated space where all the participants can post information considered relevant to the course 
content. 

To provide content, TelEduc uses the Web infrastructure, more specifically, hypertext with images, links, 
audios and videos. All these media can be published as content in tools like Agenda, Support Material and 
Readings. To create text content, the user interacts with a rich text editor, the CKEditor (2013). CKEditor is a 
third-party WYSIWYG text editor to be used inside Web pages, bringing to the Web application common 
editing features found on desktop editing text applications, but CKEditor version 3.3 does not work on 
mobile devices. In previous work (Da Silva, & da Rocha, 2012), we studied some problems in use of third- 
party software on TelEduc to create and to visualize documents, describing that mobile compatibility needs 
to be considered to not prejudice mobile users. 

The Agenda, Activities, Support Materials, Readings, Mail and Portfolio tools allow attaching files into 
them items in similar way: the user clicks in the “Attach File” button, select the file to be attached using a 
dialog and, after the click on the save button, the file is uploaded. 

Since the e-Learning environments need to be easy to use for users with different levels of Web 
experience, the usability is an important nonfunctional requirement. TelEduc was designed in an iterative 
design-evaluation process to have good usability and the user interface does not impair teaching and learning 
activities, so many usability evaluations were done. The accessibility is another nonfunctional requirement 
desired for TelEduc, to allow impaired people to use the environment without meet barriers or obstacles. 

TelEduc was designed to use a mouse and keyboard as input devices, and a medium screen size as output 
device. TelEduc is better visualized into 1024x200 pixels screen resolution. Visualize it into a lower screen 
resolution cause some user interface problems like dispose interface components in wrong position. Beside 
the problems happen due the resolution changing, which problems and barriers the mobile users met when 
interact with TelEduc? To answer this question, we developed a user test case described in the next section. 


4. MATERIALS AND METHOD 

To identify interaction problems when an e-Learning environment is accessed by a mobile device we planned 
a study case composes with four users tests. The main activities to do the study case were: (i) tools to be 
investigated and tasks definition; (ii) hardware to be used; (iii) questionnaires planning; (iv) preparation of 
the course. 

The following sub-sections explain briefly each activity. We started choosing the tools to be evaluated 
and defined the tasks for user test sessions using the smartphones available, an Android-based and an iPhone. 

Based on our experience in using e-Learning environments, we chose the tools: Agenda, Activities, 
Readings, Polls, Mail and Portfolio. For each tool was defined one task, considering the most important 
feature of the tool. All tools were used considering the student's view. The defined tasks were: 1. Login in 
TelEduc; 2. Read the Agenda; 3. Read the Reading and do it; 4. Read the Activity; 5. Post her activity in her 
portfolio; 6. Answer a poll; 7. Send e-mail to the teacher; 8. Logout of TelEduc. 

To do the task 5, the volunteers need to search into the Web for an article. The purposeful activity is to 
allow us identify interaction problems when the users need to navigate in two web pages, visualizing one 
page and going to another. In the tasks planning we found some interaction problems that impair the user to 
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conclude the tasks, so we shaped the defined activities such a way the user does not meet the identified 
problems with the goal to find new interaction problems. The problems identified on task planning are 
discussed in Section 5.1. 

We used a Motorola Milestone smartphone (Motorola Mobility, 2013) and an Apple iPhone 3GS (Apple, 
2013). The Motorola Milestone has a 3.7 inches multi-touch display with 133MB internal storage memory 
expansive up to 32 GB with a memory card, 600 MHz Cortex-A8 processor and 256 MB RAM, a 5MP 
camera, GPS and wireless connection by Wi-Fi 802.11 b/g and bluetooth. Android 4.0.3 (Google, 2013) was 
used as operation system (OS). Motorola Milestone has a proximity sensor, an ambient light sensor, a 3 -axis 
accelerometer and a geomagnetism sensor to provide orientation with respect to Earth's magnetic field. To 
browse in the Web application, the volunteers use the Android stock Web browser. 

The Apple iPhone 3GS (Apple, 2013a) has a 3.5 inches multi-touch display with 32 Gb internal storage 
memory, 600 MHz Cortex-A8 processor and 256 MB eRAM, a 3MP camera, GPS and wireless connection 
by Wi-Fi 802.11 b/g and bluetooth. The installed operation system is iOS version 5 (Apple, 2013b). iPhone 
has too a proximity sensor, an ambient light sensor, a 3-axis accelerometer and a geomagnetism sensor. To 
browse in the Web application, the volunteers use the Safari browser. In both devices, the proximity sensor 
and the accelerometer can be used to interact with applications, but the browsers do not use these features as 
input. Only the touchscreen was used as input device. 

To collect information about the volunteers and them opinion we elaborated two questionnaires. The first 
one was to collect data about user age, genre, internet usage and mobile skills. The second one was to get 
personal satisfaction in do the tasks. Due we did an experiment involving people, we prepared a consent form 
to be signed by the volunteers informing her about the study purposes, the anonymity of the volunteer, and 
allowing recording the interaction to further analysis. 

After the task planning, we prepared a course in the TelEduc installed in our server with the agenda 
content, the activity description, an article published on Readings tool, and the poll to be answered. This 
preparation is to simulate a course in the environment with chained activities. Since the user tests laboratory 
and the server share the same local network, we did not worry about Internet lacks or fail. 

We invited four undergraduate students to participate, one man and three women, whom filled the profile 
questionnaire before the participation. All volunteers have 20 years old, three of them have smartphone and is 
mobile users for more than six month, the last one does not have a smartphone and her consider not be a 
mobile user. 


5. DATA ANALYSIS 

In this section we discuss about the found problems when mobile users access the TelEduc Environment. We 
found one problem during the tasks definition, and discuss it here since impose a barrier and do not allow 
mobile users conclude their goal. Analyzing the user tests data, we found 5 relevant problems for mobile 
users and other usability problems that is device independently. We focused here in the mobile problems and 
in the end of the section we present solutions. 

5.1 Problem found in the Task Planning 

TelEduc uses CKEditor to allow users write rich text instead of simple plain text, but CKEditor does not 
work in iPhone and in Android-based devices, bringing a barrier to user write rich text. For example, it is not 
possible put content in a Portfolio item because the content field does not appear ( Problem 1). Looking in the 
environment for others barriers caused by CKEditor, we found that it is possible to write message in Mail 
tool and post Bulletin Board posts, but the content field appears to write simple text since CKEditor is not 
displayed. In the other environment tools the barrier was found. 

Focused on discovery new interaction problems we planned the tasks such a way the users do not match 
this problem. The next sub-section presents the problems discovery through the user tests. 
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5.2 Problems found in the User Tests 

The first identified problem in user tests ( Problem 2) is related with the web site does not follow the 
smartphone interface standard. The first time the user 2 tried to go to another tool, she touched in the space 
between the wanted menu item the symbol *>’ (Fig. 2a shows the point tapped by the user in the interface), 
since no action was triggered, she tried a lot of times again in the same place. Asked about the unexpected 
system response, the user touched in the tool label and the system shows the tool content. Maybe the user 
thought the TelEduc interface follows the smartphones standard, which is possible to trigger an action 
touching in the space nearby the menu item label (Fig. 2b). In desktops it is softened due to change the mouse 
cursor from an arrow to a pointing hand, giving a visual clue that it does not have in touchscreen mobile. 



Course Dynamic > 

Agenda 

Activities ^ 

Support Material 
Readings 

Frequently Asked Questions 
Polls > 

Required Stop 
Bulletin Board 


Discussion Forums 



(a) 



(b) 


Figure 2. Print screens marked with the place tapped by the user in (a) TelEduc tool menu and no action was 
triesered and (bl in iPhone menu settinss. where an action was triesered. 

Another problem observed during the user tests was related with the selection function (Problem 3). 
Three users needed help to select the desirable URL to perform the copy and paste functions. Maybe due the 
users are familiar with desktops, they were expected for a menu or a toolbar with options. Asked about how 
they interact with the device, they realized about the touch interface and they tried to tap the desirable text, 
and, in a second try, tapped the text and hold the finger over the text, and the interface responses with the 
options. The problem is about the visibility and discoverability of the actions. We do not realize that we will 
meet this problem, since the all volunteers are the generation who use mobile devices since childhood, but 
they have a mental model more related with the desktop computers than mobile devices. 

After copy the URL to do the defined activity in task 4, two users had another problem: how to return to 
TelEduc, since another tab was opened (Problem 4). The button to trigger the action to show opened tabs is 
at bottom on iPhone and is in at top on Android-based smartphones. One of the users prefers typing the 
TelEduc address again instead of searching for how to go to an opened tab. The other user asked for help. 

Most of TelEduc feedback appears on the page top (Fig. 3a), and to draw the user's attention the feedback 
blinks. In mobile devices, with the user is visualizing another part, the feedback is not visible (Problem 5). 
One example happens when the user is posting a URL in the Portfolio item (doing the task 5), and after to tap 
the “Ok” button, the system response with the feedback “Internet Addresses included successfully.” in the 
page top, but the user does not see since she was interaction with the elements in the bottom (Fig. 3b). It is 
important to highlight that the TelEduc form to show feedbacks differs from the smartphones form to do it. In 
smartphones feedbacks were showed as a popup dialog. 

The last identified problem is about the time a feedback message is displayed (Problem 6). When the user 
sends a message, the TelEduc shows a feedback page to inform that the message was successful sent for 2000 
milliseconds. Since the smartphones take more time to render the page and shows all the page content, the 
waiting time expires; the browser closes the feedback page almost immediately, the user can read the 
feedback message, giving the impression that an error happed. 

Analyzing the user opinion questionnaire and considering all identified problems, the users agree with 
TelEduc have good usability. Three of the four volunteers described feel difficult to interact, and the last one 
related does not feel any difficult to interact. 
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5.3 Solutions 



(a) 


(b) 


Figure 3. Print screens of TelEduc feedback on (a) desktop and (b) mobile devices after the user click in the “Ok” 
link to post the link in the Portfolio item to do the task 5. 

Problem 1 is about the mobile user cannot write the content in most of TelEduc due the CKEditor is not 
displayed on mobile devices. A good solution is to allow mobile user only write plain text, similar happen to 
write messages in TelEduc Mail Tool. Analyzing the Portfolio tool code, we discovery that the content field, 
a textarea tag, was not showed due a style property (display:none) that CKEditor changes when it loads. 
Since mobile devices do not load the CKEditor, this property is not changed. Changing the code to get the 
content from the value property when CKeditor is not load, and get the content from CKEditor when it 
loaded, resolve the problem, destroying this barrier. 

Problem 2 (user tapping in the space between menu item label and the symbol ‘>’ to trigger an action) is 
easily to resolve. The tool menu is implemented with table and anchor tags, just changing the order putting 
the li tag inside the <a> tag, becoming all the cell area a link. 

Problem 3 (trigger a text selection) and Problem 4 (return to a previous tab) are related with the 
smartphones operation system. Norman and Nielsen (2010) discuss discoverability and visibility problems in 
touchscreen devices, and they argue there is a lack of established guidelines for gestural control. 

A solution for the Problem 5 (TelEduc feedback is fixed at the top) is show feedback messages using 
JavaScript dialog when the device have JavaScript support. Since browsers for mobile devices have 
JavaScript engine inside, the browser have the responsibility to show the message in the visual standard used 
in the mobile device. This solution may be applied to the Problem 6 (feedback time), giving the user the 
feeling of control over the application. 


6. CONCLUSION AND FUTURE WORK 

Mobile devices, such as smartphones and tablets, are becoming increasingly popular; most of them have 
touch screen displays, Internet access and enough computing power to process Web pages, allowing mobile 
users access Web applications, such e-Learning environments. The e-Learning environments were initially 
designed to be used with keyboard, mouse and a medium size display, and now have to consider their access 
in mobile devices. We believe that Internet is a meeting point for all devices, so the Web applications need to 
be access by any device. Which kind of barriers and problems do mobile users meet when browsing in an 
e-Learning environment? We did a user test case with four volunteers accessing the TelEduc environment 
through iPhone and Android-based smartphones, and discovery 6 problems that impact in the usability. Do 
usability studies with users is a hard work, but it is necessary due the lack of techniques to do this kind of 
evaluation. The discovered problem is related with the consistence between device interfaces and TelEduc 
interface, discoverability and visibility of the features and code structure. 

e-Learning environments have a lot of contributions to m-Learning, offering a platform to teachers and 
students do their teaching and learning activities, but some technologic gaps need to be filled. With this work, 
we started with the first step finding and eliminating barriers and interaction problems that become hard 
mobile users access e-Learning features. Another step is taking advantages of the mobile device features in 
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pro learning activities such create content like photos and videos. More research is need, since the interaction 
style changed and different features are available, e.g., the mobile users write text with fewer words? 
Analyzing the mail message sent from our volunteers to teachers to inform the activity was done, we noted 
just a sentence was write. Is it happened due to the profile of our younger volunteers or due the mobile device 
restrictions? How this influences in the activities in the environments? Mobile users prefer record a video or 
write a big text? These questions needs more research to be explained, but needs an e-Learning environment 
without barrier to be accessed on mobile devices. 
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